<template>
  <div class="md-topic-detail-pages-component">
    <!-- 头部 -->
    <MdDetailHeaderClassComponent :title="topicInfo.title" />
    <div class="md-topic-detail-panel">
      <p style="margin-bottom: 10px">您当前得分：<span style="color: #db192a;">{{$route.query.grade}} 分</span></p>
      <div class="topic-item" :id="`scrollTip${key}`" v-for="(item, key) in topicInfo.content" :key="key">
        <p class="no-answer-tip" v-if="noAnswerIndexAry.includes(key)">请完成该题目</p>
        <MDTopicItemCheckClass v-model="item.answer" :topicItemInfo="item" />
      </div>
      <div class="submit-button" @click="$router.go(-1)">返回</div>
    </div>
  </div>
</template>
<script>
import { selectAnswerRecordInfo } from '@/axios/topics'
import MdDetailHeaderClassComponent from '../components/class/mdDetailHeader/index.vue'
import MDTopicItemCheckClass from '../components/class/mdTopicItemCheck/index.vue'
export default {
  name: 'md-topic-detail-pages-component',
  components: {
    MdDetailHeaderClassComponent,
    MDTopicItemCheckClass
  },
  data () {
    return {
      noAnswerIndex: null,
      noAnswerIndexAry: [],
      topicInfo: {
        title: '',
        content: []
      }
    }
  },
  created () {
    const topicId = this.$route.query.rid
    this.selectAnswerRecordInfo(topicId)
  },
  methods: {
    async selectAnswerRecordInfo (id) {
      const res = await selectAnswerRecordInfo(id)
      if (res.code === 200) {
        console.log(res)
        this.topicInfo = res.data
        this.topicInfo.content = JSON.parse(res.data.content).map(item => {
          return {
            ...item,
            rightAnswerLabel: item.rightAnswerLabel.join(''),
            questionList: item.questionList.map(q => {
              return {
                ...q,
                rightAnswerLabel: q.rightAnswerLabel.join('')
              }
            })
          }
        })
        console.log(this.topicInfo.content)
      }
    },
    // 当该题作答了，此题的“请完成该题目”的提示清除
    clearNoAnswer (key) {
      this.noAnswerIndex = null
      const cIndex = this.noAnswerIndexAry.indexOf(key)
      this.noAnswerIndexAry.splice(cIndex, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.md-topic-detail-pages-component {
  width: 100%;
  padding: 30px 0;
  .md-topic-detail-panel {
    width: 1152px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    padding: 20px 30px;

    // width: 100%;
    // background: #F7F8FD;
    // padding: 14px;
    // box-sizing: border-box;
    .topic-item {
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(0,70,139,0.06);
      border-radius: 4px;
      padding: 14px;
      box-sizing: border-box;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      .no-answer-tip {
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #E73A39;
        line-height: 20px;
        margin-bottom: 6px;
      }
    }
    .submit-button {
      cursor: pointer;
      margin: 20px auto;
      width: 220px;
      height: 45px;
      border-radius: 23px;
      background: linear-gradient(180deg, #FD8663 0%, #F85332 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 21px;
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>
